body{
    background-color: #ecebf0;
}
input{
    display: none;
}
#ti1:checked~.title{
display: none;
}
.title{
    width: 100%;
    height: 100px;
    margin: 10px auto -10px;
    background-color: #eeedf2;
    display: flex;
    align-items: center;
    .con{
        display: flex;
        border-radius: 15px;
        width: 90%;
        height: 70px;
        margin: -20px auto 0;
        background-color: #9bba6e;
        display: flex;
        justify-content: space-evenly;
        align-items:center;
        .left{
            width: 50px;
            height: 50px;
           font-size: 3em;
            line-height: 50px;
            color: white;
        }
        .cen{
            width: 200px;
            color: white;
        }
        .right{
            color: #d2e5b0;
        }
        
    }
}
.all{
    input{
        display: none;
    }
    #ra1:checked~.top .yd{
        left: 3px;
    }
    #ra1:checked~#con1{
        display: block;
    }
    #ra2:checked~#con2{
        display: block;
    }
    #ra3:checked~#con3{
        display: block;
    }
    #ra1:checked~.top #des1,
    #ra2:checked~.top #des2,
    #ra3:checked~.top #des3{
        color: white;
    }
   #ra2:checked~.top .yd{
        left: 95px;
    }
   #ra3:checked~.top .yd{
        left: 185px;
    }
    width: 90%;
    height: auto;
    margin: 10px auto 130px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    .top{
        width: 90%;
        height: 60px;
        display: flex;
        justify-content: center;
        position: relative;
        background-color: #ededed;
        margin: 30px auto 30px;
        border-radius: 30px;
       
        .yd{
            width:100px;
            height: 50px;
            border-radius: 30px;
            position: absolute;
            left: 3px;
            background-color: #5987d5;
            margin: 5px ;
            transition: .5s;
            box-shadow: 0px 2px 20px -1px #5987d5;
        }
        .des{
            width: 30%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-weight: 600;
            font-size: 1em;
            position: relative;
            z-index: 999;
            transition: .5s;
        }
       input{
        display: none;
       }
      
      
    }
    .con{
        width: 90%;
        height: auto;
        margin: 0 auto;
        display: none;
        .list{
            width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 0 auto 15px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ecebf0;
            .left{
                width: 250px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                .l1{
                    width: 50px;
                    height: 50px;
                    text-align: center;
                    border-radius: 15px;
                    line-height: 50px;
                    font-size: 1.6em;
                    color: white;
                    margin-right: 20px;
                }
                .r1{
                    .top1{
                        font-size: 1.5em;
                        color: black;
                        font-weight: 600;
                    }
                    .down{
                        color: #e5e5e5;
                        font-size: 1em;
                    }
                }
            }
            
        }
        .list:nth-child(1){
            padding-bottom: 10px;
            border-bottom: 1px solid #f6f6f6;
            .left{
                .l1{
                    background-color:#e77157;
                    box-shadow: 0px 2px 20px -1px #e77157;
                    font-weight: 600;
                }
            }
            .right{
                .top1{
                    color: #c94f5a;
                    font-weight: 600;
                    font-size: 1.5em;
                }
                .down{
                    color: #707070;
                    font-size: .9em;
                }
            }
        }
        .list:nth-child(2){
            padding-bottom: 10px;
            border-bottom: 1px solid #f6f6f6;
            .left{
                .l1{
                    background-color:#a8cf72;
                    box-shadow: 0px 2px 20px -1px #a8cf72;
                    font-size: 1.2em;
                }}
                .right{
                      .top1{
                    color: #6284c4;
                    font-weight: 600;
                    font-size: 1.5em;
                }
                .down{
                    color: #707070;
                    font-size: .9em;
                }
                }
              
            
        }
        .list:nth-child(3){
            .left{
                .l1{
                    background-color:#f2c761;
                    box-shadow: 0px 2px 20px -1px #f2c761;
                    font-size: 1.2em;
                    background: url(../img/pexels-eberhard-grossgasteiger-844297.jpg) no-repeat center;
                    background-size: 100% 100%;
                }}
                .right{
                     .top1{
                    color: #9bba6e;
                    font-weight: 600;
                    font-size: 1.5em;
                }
                .down{
                    color: #707070;
                    font-size: .9em;
                    text-align: right;
                }
                }
               
            
        }
       .res{
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin: 0 auto 15px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ecebf0;
        .left{
            width: 250px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            .l1{
            width: 50px;
            height: 50px;
            border-radius: 15px;
            text-align: center;
            font-size: 1.3em;
            line-height: 50px;
            margin-right: 20px;
            }
            .r1{
                
              .top1{
                width: 180px;
                font-size: 1.1em;
                font-weight: 600;
              }
             .down{
                color: #e5e5e5;
                font-size: .9em;
             }
            }
        }
       
        .right{
            width: 200px;
            height: 30px;
            border-radius: 10px;
            text-align: center;
            box-sizing: border-box;
            line-height: 30px;
            font-size: .5em;
            font-weight: 600;
            
            color: white;
        }
       }
       .res:nth-child(4){
        .left{
            .l1{
                background-color: #6593e1;
                box-shadow: 0px 2px 20px -1px #6593e1;
                color:white
            }
        }
       
       }
       .res:nth-child(5){
        .left{
            .l1{
                background-color: #d65a65;
                box-shadow: 0px 2px 20px -1px #d65a65;
                color:white
            }
        }
       }
      
    }
}
.bottom{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 22vw;
    display: flex;
    border-radius: 10px;
    background-color: white;
    justify-content: space-evenly;
    align-items: center;
    .glyphicon{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size:1.5em;
        color: black;
      
        h6{
            font-size: .7em;
            color: black;
           
        }
    }
    a:nth-child(3){
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
       
        .glyphicon{
            margin-top: 1vw;
            color: white;
            width: 15vw;
            height: 15vw;
            background-color: #6797e3;
            border-radius: 6vw;
            line-height: 15vw;
            box-shadow: 0px 2px 20px -1px #6797e3;
        } 
        h6{
            font-size: 1em;
            color: black;
            }
    }
    a:active{
        text-decoration: none;
    }
}